<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #d8fffd;
    }

    .container {
      width: 600px;
      height: 300px;
      background-color: #4ee57f;
      border-radius: 20px;
      color: white;
      clip-path: circle(50px at 550px 50px);
      transition: .5s ease-in-out;
      position: relative;
    }

    .container:hover {
      background-color: #83b4e5;
      clip-path: circle(100% at 50% 50%);
    }

    .container h1 {
      padding: 10px;
    }

    .container p {
      text-indent: 2em;
      padding: 10px;
    }

    .container span {
      font-size: 30px;
      width: 100px;
      height: 100px;
      line-height: 100px;
      display: block;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      transition: .5s ease-in-out;
    }

    .container:hover span {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="inner">
      <h1>Look at me!</h1>
      <p>I went to three cities to play during last summer holidays. They are Beijing, Dalian and HuHehot. I went to
        Beijing more than eight times. Beijing is the capital of China. It’s a big city. I am very familiar with
        Beijing. It takes an hour and forty minutes from Nantong to Beijing by plane. There are many tall buildings
        in Beijing.</p>
      <span>i</span>
    </div>
  </div>
</body>

</html>